<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
        
        /* 歌单状态样式 */
        .album-status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-online {
            background-color: #f0f9eb;
            color: #67c23a;
        }
        
        .status-offline {
            background-color: #fdf6ec;
            color: #e6a23c;
        }
        
        /* 详情弹窗样式 */
        #details {
            max-height: 400px;
            overflow-y: auto;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">歌单列表</div>
        <div class="layui-card-body">
            <table id="musiclist" lay-filter="musiclistFilter"></table>
        </div>
    </div>
</div>

<!--歌单详情对话框-->
<div id="details" style="display: none;padding: 20px">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="3">
                <img src="" id="coverimg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="listname"></span></h2>
                <span><i class="layui-icon layui-icon-username"></i><span id="create"></span></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">标签: <span id="tags"></span></td>
        </tr>
        <tr>
            <td>点击量: <span id="clickcount"></span></td>
            <td>歌曲总数: <span id="musiccount"></span></td>
        </tr>
    </table>

    <!-- 专辑详情表-->
    <table id="musiclistDetails"></table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        //加载util工具
        var util = layui.util;
        //加载form表单
        var form = layui.form;

        //渲染表格
        table.render({
            elem: '#musiclist',
            url: '/musicList/list',
            toolbar: '#toolbar',
            page: {
                theme: '#1E9FFF',
                limit: 10,
                limits: [5, 10, 15, 20, 30]
            },
            cols: [[
                {type: 'checkbox', width: 50},
                {type: 'numbers', title: '序号'},
                {field: 'id', title: '歌单ID', width: 80},
                {field: 'name', title: '歌单名称', width: 200},
                {field: 'pic', title: '封面图', width: 100, templet: function(d) {
                    return d.pic ? '<img src="' + d.pic + '" width="40px" height="40px">' : '无';
                }},
                {field: 'createTime', title: '创建时间', width: 180, templet: function(d) {
                    return d.createTime ? util.toDateString(new Date(d.createTime), 'yyyy-MM-dd HH:mm:ss') : '';
                }},
                {field: 'uid', title: '用户ID', width: 80},
                {field: 'status', title: '状态', width: 80, templet: function(d) {
                    return d.status === 1 ? '<span class="album-status status-online">上架</span>' : '<span class="album-status status-offline">下架</span>';
                }},
                {title: '操作', width: 200, toolbar: '#rowTools', fixed: 'right'}
            ]],
            done: function(res, curr, count) {
                // 解析R对象格式的响应数据
                if (res.success && res.data) {
                    // 数据已正确解析，表格会自动渲染
                }
            }
        });

        // 自定义头工具栏
        table.on('toolbar(musiclistFilter)', function(obj) {
            if (obj.event === 'add') {
                // 跳转到添加页面
                window.location.href = 'musiclist-add.html';
            } else if (obj.event === 'dels') {
                // 批量删除功能
                var checkStatus = table.checkStatus('musiclist');
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择要删除的歌单', {icon: 5});
                    return;
                }
                layer.confirm('确定要删除选中的' + checkStatus.data.length + '个歌单吗？', {icon: 3}, function(index) {
                    // 这里可以实现批量删除逻辑
                    layer.msg('批量删除功能待实现', {icon: 6});
                    layer.close(index);
                });
            }
        });

        // 行工具栏事件
        table.on('tool(musiclistFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                // 查看详情
                $.ajax({
                    type: 'get',
                    url: '/musicList/details',
                    data: {id: data.id},
                    success: function(resp) {
                        if (resp.success && resp.data) {
                            // 填充详情数据
                            $('#listname').text(resp.data.name);
                            $('#coverimg').attr('src', resp.data.pic || '../res/img/default-album.jpg');
                            $('#create').text('用户ID: ' + resp.data.uid);
                            // 这里可以根据实际情况填充其他信息
                            
                            // 加载歌单中的歌曲列表
                            $.ajax({
                                type: 'get',
                                url: '/musicListDetails/list',
                                data: {listId: data.id},
                                success: function(songResp) {
                                    if (songResp.success && songResp.data) {
                                        // 渲染歌曲列表
                                        var songTable = table.render({
                                            elem: '#musiclistDetails',
                                            data: songResp.data,
                                            cols: [[
                                                {type: 'numbers', title: '序号'},
                                                {field: 'musicId', title: '歌曲ID', width: 80},
                                                {field: 'musicName', title: '歌曲名称', width: 200},
                                                {field: 'addTime', title: '添加时间', width: 180, templet: function(d) {
                                                    return d.addTime ? util.toDateString(new Date(d.addTime), 'yyyy-MM-dd HH:mm:ss') : '';
                                                }},
                                                {title: '操作', width: 80, templet: function() {
                                                    return '<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="removeSong">删除</button>';
                                                }}
                                            ]],
                                            page: false
                                        });
                                    }
                                }
                            });
                            
                            // 打开详情弹窗
                            layer.open({
                                type: 1,
                                title: '歌单详情',
                                area: ['800px', '500px'],
                                content: $('#details'),
                                success: function() {
                                    // 添加从歌单中删除歌曲的事件监听
                                    $('.layui-btn-danger[lay-event="removeSong"]').on('click', function() {
                                        var tr = $(this).closest('tr');
                                        var musicId = tr.find('td[data-field="musicId"]').text();
                                        
                                        layer.confirm('确定要从歌单中移除这首歌曲吗？', {icon: 3}, function(index) {
                                            $.ajax({
                                                type: 'delete',
                                                url: '/musicListDetails/delete',
                                                data: {listId: data.id, musicId: musicId},
                                                success: function(resp) {
                                                    if (resp.success) {
                                                        layer.msg('移除成功', {icon: 6});
                                                        // 刷新歌曲列表
                                                        $.ajax({
                                                            type: 'get',
                                                            url: '/musicListDetails/list',
                                                            data: {listId: data.id},
                                                            success: function(songResp) {
                                                                if (songResp.success && songResp.data) {
                                                                    table.reload('musiclistDetails', {
                                                                        data: songResp.data
                                                                    });
                                                                }
                                                            }
                                                        });
                                                    } else {
                                                        layer.msg(resp.message || '移除失败', {icon: 5});
                                                    }
                                                },
                                                error: function() {
                                                    layer.msg('网络错误，请稍后重试', {icon: 5});
                                                }
                                            });
                                            layer.close(index);
                                        });
                                    });
                                }
                            });
                        } else {
                            layer.msg(resp.message || '获取详情失败', {icon: 5});
                        }
                    }
                });
            } else if (obj.event === 'edit') {
                // 编辑功能 - 跳转到编辑页面或打开编辑弹窗
                layer.open({
                    type: 2,
                    title: '编辑歌单',
                    area: ['500px', '400px'],
                    content: 'musiclist-add.html?id=' + data.id,
                    end: function() {
                        // 关闭弹窗后刷新表格
                        table.reload('musiclist');
                    }
                });
            } else if (obj.event === 'del') {
                // 删除功能
                layer.confirm('确定要删除歌单《' + data.name + '》吗？', {icon: 3}, function(index) {
                    $.ajax({
                        type: 'delete',
                        url: '/musicList/delete',
                        data: {id: data.id},
                        success: function(resp) {
                            if (resp.success) {
                                layer.msg('删除成功', {icon: 6});
                                // 刷新表格
                                table.reload('musiclist');
                            } else {
                                layer.msg(resp.message || '删除失败', {icon: 5});
                            }
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试', {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>


<!--头工具栏模板-->
<script id="toolbar" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="add">
            <i class="layui-icon layui-icon-add-circle"></i> 添加歌单
        </button>
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>
</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>
</html>